<!--  -->
<template>
  <!-- Form -->
  <el-dialog v-model="dialogFormVisible" title="填写您的订单">
    <el-form :model="form">
      <el-form-item label="货物名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" disabled />
      </el-form-item>
      <el-form-item label="货物数目" :label-width="formLabelWidth">
        <el-input v-model="form.num" autocomplete="off" />
      </el-form-item>
      <el-form-item label="收货地址" :label-width="formLabelWidth">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,buydit()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>


<div class="boxofhu">
 <div class="onebox" v-for = "item in dataofhu" :key="item.id">
   <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"/>
   <h2>{{item.name}}</h2>
   <el-button style="float: right" @click="dialogFormVisible = true;showdit(item.name,item.id)">立即购买</el-button>
 </div>
</div>
</template>

<script lang="js" setup>
  import {ref,reactive} from "vue";
  import { peoplePiniadata } from '@/stores/peoplePinia.js'
  //数据持久化处理
  const piniaData = peoplePiniadata()
  const dataofhu = ref([{name:'红',id:'1'},{name:'橙',id:'2'},{name:'黄',id:'3'},{name:'绿',id:'4'},{name:'黑',id:'5'}])
  const dialogFormVisible = ref(false)
  const formLabelWidth = '140px'
  const form = ref({
    name: '',
    num: '',
    address: '',
    id:'',
    userid:piniaData.id
  })
  const showdit  = (name,id) => {
    form.value.name = name;
    form.value.id = id;
  }
  const buydit = () => {
    console.log(form.value)
  }
</script>

<style scoped>
.boxofhu{
  width: 90vw;
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.onebox{
  width: 300px;
  height: 400px;
  box-shadow: 1px 1px 2px 1px black;
  margin-top: 20px;
}
.onebox img{
  width: 100%;
  height: 330px;
}
.onebox h2{
  text-align: center;
}
</style>
